import SvgEditor from "@/components/SvgDraw";
import { useMemoizedFn } from 'ahooks';

const svg = `
  <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
  <g class="layer">
    <title>Layer 1</title>
    <rect fill="#692424" height="317" id="svg_1" stroke="#000000" width="317" x="148" y="59.5"/>
    <rect fill="#FF0000" height="70" id="svg_2" stroke="#000000" width="60" x="50" y="200.5"/>
    <rect fill="#FF0000" height="64" id="svg_3" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="81" x="509" y="210.5"/>
    <text fill="#000000" font-family="Serif" font-size="24" id="svg_4" stroke="#000000" stroke-width="0" text-anchor="middle" x="78" xml:space="preserve" y="237.5">1</text>
    <text fill="#000000" font-family="Serif" font-size="24" id="svg_5" stroke="#000000" stroke-width="0" text-anchor="middle" x="548" xml:space="preserve" y="250.5">2</text>
  </g>
  </svg>
`;

const Home = () => {
  return (
    <div style={{ width: '100%', height: '100%' }}>
      <SvgEditor  defaultSvg={svg}/>
    </div>
  )
}

export default Home;